<template>
    <div class="paymentSettings">
        <div class="addPayBtn">
            <Button @click.native="addPay">添加支付设置</Button>
        </div>
        <!-- 支付设置tabs start -->
        <Tabs type="card">
            <TabPane v-for="tab in tabs" :key="tab" :label="tab">
                <Form ref="payRef" :model="payForm" :rules="payRule" :label-width=80>
                    <FormItem label="支付渠道" prop="channelModel">
                        <Select v-model="payForm.channelModel" style="width:200px" @on-change="changePaySelect">
                            <Option v-for="item in payList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="商户名称" prop="payName">
                        <Input placeholder="请输入商城标题" :maxlength=20 v-model="payForm.payName" style="width:400px"/>
                    </FormItem>
                    <FormItem label="受理商ID(即支付商户号)" prop="accepId">
                        <Input placeholder="请输入受理商ID" v-model="payForm.accepId" style="width:400px"/>
                    </FormItem>
                    <FormItem label="微信公众号AppId" prop="publicId">
                        <Input placeholder="请输入受理商ID" v-model="payForm.publicId" style="width:400px"/>
                    </FormItem>
                    <FormItem label="上传证书" prop="certificate">
                        <!-- certificate -->
                        <Upload action="" :before-upload="beforeUpload">
                            <Button icon="ios-cloud-upload-outline" :loading="loadingStatus">上传文件</Button>
                            <p class="mt-10" style="font-size:12px;color: #e43e31">只能上传P12格式的文件</p>
                        </Upload>
                        {{ payForm.certificate }}
                        <Input v-model="payForm.certificate" v-show="false"/>
                    </FormItem>
                    <FormItem label="证书密码" prop="certificatePassword">
                        <Input placeholder="请输入证书密码" v-model="payForm.certificatePassword" style="width:400px"/>
                    </FormItem>
                    <FormItem label="商户支付密钥Key" prop="merchantKey">
                        <Input placeholder="请输入商户支付密钥Key" v-model="payForm.merchantKey" style="width:400px"/>
                    </FormItem>
                    <FormItem label="排序" prop="sort">
                        <Input placeholder="请输入数字" v-model="payForm.sort" style="width:400px"/>
                    </FormItem>
                    <FormItem label="货到付款" prop="cashOnArrival">
                        <Radio-group v-model="payForm.cashOnArrival" @on-change="chooseRadio">
                            <Radio label="支持">
                                <span>支持</span>
                            </Radio>
                            <Radio label="不支持">
                                <span>不支持</span>
                            </Radio>
                        </Radio-group>
                    </FormItem>
                    <FormItem label="是否启用" prop="isActive">
                        <i-switch v-model="payForm.isActive" size="large">
                            <span slot="open">开启</span>
                            <span slot="close">关闭</span>
                        </i-switch>
                    </FormItem>
                </Form>
            </TabPane>
        </Tabs>
        <!-- 支付设置tabs end -->
        <!-- 支付设置弹窗 start -->
        <Modal  v-model="payModal" :mask-closable="false">
            <p slot="header">
                <span>添加支付方式</span>
            </p>
            <div>
                <Form ref="payRef" :model="payForm" :rules="payRule" :label-width=80>
                    <FormItem label="支付渠道" prop="channelModel">
                        <Select v-model="payForm.channelModel" style="width:200px" @on-change="changePaySelect">
                            <Option v-for="item in payList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="商户名称" prop="payName">
                        <Input placeholder="请输入商城标题" :maxlength=20 v-model="payForm.payName" style="width:400px"/>
                    </FormItem>
                    <FormItem label="受理商ID(即支付商户号)" prop="accepId">
                        <Input placeholder="请输入受理商ID" v-model="payForm.accepId" style="width:400px"/>
                    </FormItem>
                    <FormItem label="微信公众号AppId" prop="publicId">
                        <Input placeholder="请输入受理商ID" v-model="payForm.publicId" style="width:400px"/>
                    </FormItem>
                    <FormItem label="上传证书" prop="certificate">
                        <!-- certificate -->
                        <Upload action="" :before-upload="beforeUpload">
                            <Button icon="ios-cloud-upload-outline" :loading="loadingStatus">上传文件</Button>
                            <p class="mt-10" style="font-size:12px;color: #e43e31">只能上传P12格式的文件</p>
                        </Upload>
                        {{ payForm.certificate }}
                        <Input v-model="payForm.certificate" v-show="false"/>
                    </FormItem>
                    <FormItem label="证书密码" prop="certificatePassword">
                        <Input placeholder="请输入证书密码" v-model="payForm.certificatePassword" style="width:400px"/>
                    </FormItem>
                    <FormItem label="商户支付密钥Key" prop="merchantKey">
                        <Input placeholder="请输入商户支付密钥Key" v-model="payForm.merchantKey" style="width:400px"/>
                    </FormItem>
                    <FormItem label="排序" prop="sort">
                        <Input placeholder="请输入数字" v-model="payForm.sort" style="width:400px"/>
                    </FormItem>
                    <FormItem label="货到付款" prop="cashOnArrival">
                        <Radio-group v-model="payForm.cashOnArrival" @on-change="chooseRadio">
                            <Radio label="支持">
                                <span>支持</span>
                            </Radio>
                            <Radio label="不支持">
                                <span>不支持</span>
                            </Radio>
                        </Radio-group>
                    </FormItem>
                    <FormItem label="是否启用" prop="isActive">
                        <i-switch v-model="payForm.isActive" size="large">
                            <span slot="open">开启</span>
                            <span slot="close">关闭</span>
                        </i-switch>

                    </FormItem>

                   
                </Form>
            </div>
            <div slot="footer" class="footer ta-c">
                <Button type="primary" @click="submitLogist('payRef')" :loading="submitLoading">提交</Button>
                <Button type="primary" @click.native="closeLogist">取消</Button>
            </div>
        </Modal>
        <!-- 支付设置弹窗 end -->
        

    </div>
</template>
<script>
export default {
    name: 'paymentSettings',
    data () {
        return {
            shopId: '',
            // 新增支付方式弹窗
            payModal: false,
            submitLoading: false,
            loadingStatus: false,
            payList: [
                {
                    value: '微信支付',
                    label: '微信支付'
                },
                {
                    value: '支付宝支付',
                    label: '支付宝支付'
                }, {
                    value: '微信扫码',
                    label: '微信扫码'
                }, {
                    value: '支付宝扫码',
                    label: '支付宝扫码'
                }
            ],
            payForm: {
                channelModel: '',
                payName: '',
                accepId: '',
                publicId: '',
                certificatePassword: '',
                merchantKey: '',
                sort: '',
                cashOnArrival: '不支持',
                isActive: false

            },
            payRule: {
                channelModel: [
                    {required: true, message: '请选择地址信息', trigger: 'change'}
                ],
                payName: [
                    { required: true, message: '请输入商户名称', trigger: 'blur' },
                    { type: 'string', max: 20, message: '最多输入20个字', trigger: 'blur' },
                    { type: 'string', pattern: /^[a-zA-Z0-9\u4e00-\u9fa5]*$/, message: '请检查输入', trigger: 'blur' }
                ],
                accepId: [
                    { required: true, message: '请输入受理商ID(即支付商户号)', trigger: 'blur' },
                    { type: 'string', pattern: /^[\u4e00-\u9fa5a-zA-Z\0-9\:',!();\-\-，。；【】（）！a-zA-Z0-9_{}\-]*$/, message: '请检查输入', trigger: 'blur' }
                ],
                publicId: [
                    { required: true, message: '请输入商户名称', trigger: 'blur' },
                    { type: 'string', pattern: /^[a-zA-Z0-9\u4e00-\u9fa5]*$/, message: '只能输入汉字数字英文', trigger: 'blur' }
                ],
                certificatePassword: [
                    { required: true, message: '请输入证书密码', trigger: 'blur' },
                    { type: 'string', pattern: /^[\u4e00-\u9fa5a-zA-Z\0-9\:',!();\-\-，。；【】（）！a-zA-Z0-9_{}\-]*$/, message: '请检查输入', trigger: 'blur' }
                ],
                merchantKey: [
                    { required: true, message: '请输入商户密钥', trigger: 'blur' },
                    { type: 'string', pattern: /^[\u4e00-\u9fa5a-zA-Z\0-9\:',!();\-\-，。；【】（）！a-zA-Z0-9_{}\-]*$/, message: '请检查输入', trigger: 'blur' }

                ],
                sort: [
                    { required: true, message: '请输入商户密钥', trigger: 'blur' },
                    { pattern: /^[0-9]*$/, message: '只能输入正整数', trigger: 'blur' }

                ]
            },
            tabs: []

        };
    },
    mounted () {},
    methods: {
        // 添加支付设置
        addPay () {
            this.payModal = true;
        },
        // 支付渠道
        changePaySelect (val) {
            console.log(val, 111);
            if (val === '微信支付') {
                this.payForm.channelModel = '微信支付';
            } else if (val === '支付宝支付') {
                this.payForm.channelModel = '支付宝支付';
            } else if (val === '微信扫码') {
                this.payForm.channelModel = '微信扫码';
            } else{
                this.payForm.channelModel = '支付宝扫码';
            }

            this.payForm.channelModel = val;
        },
        // 选择
        chooseRadio (val) {
            console.log(val);
            // if (val == '1') {
            //     this.addFreightRateForm.typeName = '按商品件数计算';
            //     this.addFreightRateForm.typeCode = 'WEIGHT';
            // } else if(val == '2') {
            //     this.addFreightRateForm.typeName = '按商品重量计算';
            //     this.addFreightRateForm.typeCode = 'NUM';
            // }
        },
        // 上传文件之前的方法
        beforeUpload (file) {
            let _this = this;
            // _this.showSpin = true;
            _this.loadingStatus = true;
            if (file) {
                let reader = new FileReader();
                reader.onloadend = function () {
                    /* this从vue实例变为reader */
                    let submitData = new FormData();
                    submitData.append('file', file);
                    depot.post({
                        url: _this.URL.DOCUMENT.UPLOAD_DOCUMENT,
                        data: submitData,
                        cb: (data) => {
                            // _this.showSpin = false;
                            _this.loadingStatus = false;
                            if (data.code === 0) {
                                // _this.annalsModal.annals.documentId = data.data.id;
                                // _this.annalsModal.annals.documentUrl = data.data.accessUrl;
                                // _this.annalsModal.annals.documentName = data.data.name;
                            } else {
                                _this.$Message.error(data.message);
                            }
                        },
                        ce: (error) => {
                            // _this.showSpin = false;
                        }
                    });
                };
                if (file) {
                    reader.readAsDataURL(file);
                }
            }
            return false;
        },
        submitLogist (name) {
            this.payList.forEach(element => {
                if (element.value == this.payForm.channelModel) {
                    this.tabs.push(this.payForm.channelModel);
                }
            });
            console.log(this.tabs, '111');
            this.$refs['payRef'].validate(valida => {
                if (valida) {
                    // console.log('1222')
                }
            });
        },
        closeLogist () {}
    },
    watch: {}

};
</script>
<style lang="less" scoped>
    .paymentSettings{
        .addPayBtn{
            float: right;
        }

    }
</style>

